<template>
    <div class="content">
        <div style="width: 400px;">
            <n-card>
                <n-tabs class="card-tabs" default-value="signin" size="large" animated style="margin: 0 -4px"
                    pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
                    <n-tab-pane name="signin" tab="登录">
                        <n-form ref="formRef" :model="dynamicForm">
                            <n-form-item-row label="用户名" path="user" :rule="{
                                required: true,
                                message: '请输入姓名',
                                trigger: ['input', 'blur']
                            }">
                                <n-input v-model:value="dynamicForm.user" placeholder="输入用户名" clearable/>
                            </n-form-item-row>
                            <n-form-item-row label="密码" path="password" :rule="{
                                required: true,
                                message: '请输入密码',
                                trigger: ['input', 'blur']
                            }">
                                <n-input v-model:value="dynamicForm.password" placeholder="输入用密码" type="password" clearable/>
                            </n-form-item-row>
                        </n-form>
                        <n-button type="primary" block secondary strong @click="validFunction">
                            登录
                        </n-button>
                    </n-tab-pane>
                    <n-tab-pane name="signup" tab="注册" @click="createMessage">
                        <n-form>
                            <n-form-item-row label="用户名">
                                <n-input />
                            </n-form-item-row>
                            <n-form-item-row label="密码">
                                <n-input />
                            </n-form-item-row>
                            <n-form-item-row label="重复密码">
                                <n-input />
                            </n-form-item-row>
                        </n-form>
                        <n-button type="primary" block secondary strong>
                            注册
                        </n-button>
                    </n-tab-pane>
                </n-tabs>
            </n-card>
            <div style="text-align: center; color: lightgray; font-size: small; margin-top: 10px;">
                用户名：admin 密码：1234
            </div>
        </div>
    </div>
</template>

<script setup>

import { reactive, ref } from "vue"
import { loginRequest } from '@/api/api.js'
import store from '@/store'
import { useRouter } from "vue-router";
import { createDiscreteApi } from "naive-ui";


const router = useRouter()

// 功能不能使用提示信息
const { message } = createDiscreteApi(
    ["message"]
);

function createMessage() {
    message.info("功能待实现");
}

const formRef = ref(null)

const dynamicForm = reactive({
    user: "",
    password: ""
})

const validFunction = () => {
    // 验证表单
    formRef.value?.validate((errors) => {
        if (!errors) {
            console.log('验证通过')
            loginbutton()
        } else {
            console.log("验证失败")
            console.log(errors);
        }
    })
}


const loginbutton = async () =>{
    let res = await loginRequest(dynamicForm.user, dynamicForm.password)
    console.log(res.status)
    if (res.status === 200) {
        let token = res.data.data.token
        store.commit('LOGIN_IN', token)
        router.replace({
            path: '/home',
        })
    } else {
        console.log(res.status)
    }
}

</script>

<style lang="less" scoped>
.content {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F3F4F6;
}
</style>